<template>
  <view class="content">
    <view class="map">
      <!-- 地图组件 -->
      <map id="map"
           :longitude="lng"
           :latitude="lat"
           scale="20"
           :markers="covers"
           style="width:100%; height:100%;"
      >
      </map>
      <!-- 返回原点 -->
      <view class="dw">
        <view class="dw2" @tap="clickcontrol()">
          <image src="/static/index/dw.png" mode="widthFix"></image>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="area1">
        <view class="left">
          <view class="addr1">
            <text>{{addrname}}</text>
          </view>
          <view class="addr2">
            <text>{{addr}}</text>
          </view>
        </view>
        <view class="right">
          <text class="edit" @tap="getMapLocation()">更改地址</text>
        </view>
      </view>
      <view class="mph">
        <view class="left">
          <text>门牌号</text>
        </view>
        <view class="right">
          <input v-model="houseNo" placeholder="如:8栋801" />
        </view>
      </view>
      <view class="lxr">
        <view class="left">
          <text>联系人</text>
        </view>
        <view class="right">
          <input class="name" v-model="contacts" placeholder="姓名" />
          <input class="mobile" maxlength="11" v-model="mobile" placeholder="手机/座机" />
          <!--					<text class="txl" @tap="getContacts()">通讯录</text>-->
        </view>
      </view>
      <view class="cz">
        <view class="left">
          <!--					<text class="text1" @tap="addAddr()">存入地址簿</text>-->
        </view>
        <view class="right">
          <view class="btn" @tap="qrAddr()">
            <text>确认装货地址</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { checkMobile } from '@/common/utils.js'
export default {
  data() {
    return {
      addrname: '',
      addr: '',//地址
      lat: '',
      lng: '',
      //标点
      covers: [{
        id: 1,
        latitude: '',
        iconPath:'/static/zd.png',
        longitude: '',
        width: 30,
        height: 30
      }],
      houseNo: '',//门牌号
      contacts: '',//联系人姓名
      mobile: '',//联系人手机/座机
      location:uni.getStorageSync('location')
    }
  },
  onLoad(option) {
    let location = uni.getStorageSync('location');
    this.lng = location.longitude
    this.lat = location.latitude
    this.covers[0].latitude = location.latitude;
    this.covers[0].longitude = location.longitude;
    this.addr = location.address
    this.addrname = location.street
  },
  methods: {
    //右下角定位按钮的点击事件
    clickcontrol(){
      console.log(11)
      this.location = {
        ...uni.getStorageSync('location')
      }
    },
    //定位选择详细地址
    getMapLocation() {
      uni.chooseLocation({
        success: res => {
          if(res.address){
            console.log(res)
            this.addrname = res.name
            this.addr = res.address
            this.lng = res.longitude
            this.lat = res.latitude
            this.covers[0].latitude = res.latitude
            this.covers[0].longitude = res.longitude
          }
        },
        fail: () => {
          // 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
          uni.getSetting({
            success: res => {
              var status = res.authSetting;
              if (!status['scope.userLocation']) {
                // 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
                uni.showModal({
                  title: '是否授权当前位置',
                  content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
                  success: tip => {
                    if (tip.confirm) {
                      // 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
                      uni.openSetting({
                        success: data => {
                          // 如果用户授权了地理信息在，则提示授权成功
                          if (data.authSetting['scope.userLocation'] === true) {
                            uni.showToast({
                              title: '授权成功',
                              icon: 'success',
                              duration: 1000
                            });
                            // 授权成功后，然后再次chooseLocation获取信息
                            uni.chooseLocation({
                              success: res => {
                                if(res.address){
                                  this.addrname = res.name
                                  this.addr = res.address
                                  this.lng = res.longitude
                                  this.lat = res.latitude
                                  this.covers[0].latitude = res.latitude
                                  this.covers[0].longitude = res.longitude
                                }
                              }
                            });
                          } else {
                            uni.showToast({
                              title: '授权失败',
                              icon: 'none',
                              duration: 1000
                            });
                          }
                        }
                      });
                    }
                  }
                });
              }
            },
            fail: res => {
              uni.showToast({
                title: '调用授权窗口失败',
                icon: 'none',
                duration: 1000
              });
            }
          });
        }
      });
    },
    //获取通讯录
    getContacts() {
      uni.chooseContact({
        success: (res) => {
          console.log('获取联系人成功', res.userInfo)
        },
        fail: (err) => {
          console.log('获取联系人失败', err);
        }
      });
    },
    //存入地址簿
    async addAddr(){
      //验参
      if(!this.contacts){
        uni.showToast({
          icon:"none",
          title:"请输入联系姓名"
        })
        return
      }
      if(!checkMobile(this.mobile)){
        uni.showToast({
          icon:"none",
          title:"请输入正确的手机号"
        })
        return
      }
      if(!this.addr){
        uni.showToast({
          icon:"none",
          title:"请选择地址"
        })
        return
      }

      let data = await this.$request({
        url: '/d/address/add',
        method: 'POST',
        data: {
          contacts: this.contacts,
          mobile: this.mobile,
          addr: this.addr,
          lat: this.lat,
          lng: this.lng,
          houseNo: this.houseNo,
        },
      });
      //提示
      uni.showToast({
        icon:"success",
        title:"添加成功"
      })
    },
    //确认装货地址
    qrAddr(){
      //验参
      if(!this.addr){
        uni.showToast({
          icon:"none",
          title:"请选择地址"
        })
        return
      }
      if(!this.contacts){
        uni.showToast({
          icon:"none",
          title:"请填写联系人"
        })
        return
      }
      if(!checkMobile(this.mobile)){
        uni.showToast({
          icon:"none",
          title:"请填写正确的手机号"
        })
        return
      }

      this.$store.commit('setAddress2',{
        endaddr:this.addr,
        contacts2:this.contacts,
        mobile2:this.mobile,
        houseNo2:this.houseNo,
        lat2:this.lat,
        lng2:this.lng,
      })
      uni.navigateBack({
        delta:1  //返回上一页
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.content{
  padding-bottom: 100rpx;
  /* 地图容器样式 */
  .map{
    height: 100%;
    height: 750rpx;
    .dw{
      position: relative;
      margin-top: -150rpx;
      padding-right: 20rpx;
      display: flex;
      justify-content: flex-end;
      .dw2{
        background-color: #fff;
        width: 80rpx;
        height: 80rpx;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        image{
          width: 50rpx;
        }
      }
    }
  }
  .main{
    position: relative;
    margin-top: -50rpx;
    background-color: #fff;
    padding: 40rpx 20rpx;
    border-radius: 40rpx 40rpx 0 0;
    .area1{
      background-color: #F6F6F6;
      padding: 30rpx 20rpx;
      border-radius: 20rpx;
      display: flex;
      .left{
        .addr1{
          font-size: $uni-font-size-lg;
          font-weight: bold;
          line-height: 50rpx;
        }
        .addr2{
          margin-top: 20rpx;
          line-height: 30rpx;
          font-size: $uni-font-size-sm;
          color: #ADADAD;
        }
      }
      .right{
        margin-left: auto;
        .edit{
          display: inline-block;
          width: 140rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          font-weight: bold;
          color: #747474;
          font-size: $uni-font-size-sm;
          border: 1rpx solid #D1D1D1;
          border-radius: 10rpx;
        }
      }
    }
    .mph{
      margin-top: 30rpx;
      padding: 30rpx 20rpx;
      border-radius: 20rpx;
      display: flex;
      line-height: 40rpx;
      background-color: #F6F6F6;
      .left{
        width: 120rpx;
        font-size: $uni-font-size-lg;
        font-weight: bold;
      }
      .right{
        margin-left: 20rpx;
        input{
          width: 500rpx;
        }
      }
    }
    .lxr{
      margin-top: 30rpx;
      padding: 30rpx 20rpx;
      border-radius: 20rpx;
      display: flex;
      line-height: 45rpx;
      background-color: #F6F6F6;
      .left{
        width: 120rpx;
        font-size: $uni-font-size-lg;
        font-weight: bold;
      }
      .right{
        margin-left: 20rpx;
        display: flex;
        .name{
          width: 150rpx;
        }
        .mobile{
          width: 230rpx;
          padding-left: 20rpx;
          border-left: 1rpx solid #E1E1E1;
        }
        .txl{
          display: inline-block;
          width: 140rpx;
          height: 50rpx;
          line-height: 50rpx;
          text-align: center;
          font-size: $uni-font-size-sm;
          font-weight: bold;
          background-color: #fff;
          border-radius: 10rpx;
          color: #747474;
          border: 1rpx solid #D1D1D1;
        }
      }
    }
    .cz{
      margin-top: 50rpx;
      display: flex;
      line-height: 100rpx;
      .left{
        color: #6B6B6B;
        font-size: $uni-font-size-lg;
        font-weight: 500;
      }
      .right{
        margin-left: auto;
        .btn{
          width: 400rpx;
          height: 100rpx;
          line-height: 100rpx;
          text-align: center;
          font-size: $uni-font-size-lg;
          font-weight: bold;
          color: #fff;
          background-color: #895FFF;
          border-radius: 20rpx;
          letter-spacing: 1rpx;
        }
      }
    }
  }
}
</style>
